<%@ page language="java" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%@ taglib uri="http://struts.apache.org/tags-html" prefix="html"%>
<%@ taglib uri="http://struts.apache.org/tags-logic" prefix="logic"%>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>

<link href="${ctx}/styles/worktable.css" rel="stylesheet" type="text/css" />
<link href="${ctx}/styles/personal.css" rel="stylesheet" type="text/css">
<link media=all href="${ctx}/styles/dnd/dndSetup.css" type=text/css rel=Stylesheet>
<script language="JavaScript" type="text/javascript" src="${ctx}/scripts/rss_v10.js"></script>
<script language="JavaScript" type="text/javascript" src="${ctx}/scripts/drag.js"></script>
<script language="JavaScript" type="text/javascript" src="${ctx}/scripts/ajaxtool.js"></script>
<script language="JavaScript" type="text/javascript" src="${ctx}/scripts/dnd/updateDnd.js"></script>
<script language="JavaScript" type="text/javascript">djConfig = {isDebug: false};</script>
<script language="JavaScript" type="text/javascript" src="${ctx}/scripts/dojo/dojo.js"></script>
<script language="JavaScript"  src="${ctx}/scripts/public.js"></script>
<script language="JavaScript"  src="${ctx}/scripts/personal.js"></script>
<script language="javascript">

var moveTemp="";
moveTemp+="<div id='li_{$rssid$}_h' onClick='setUnuseId(this.parentNode)'>";
moveTemp+="<table width='100%' border='0' cellspacing='0' cellpadding='0' class='dragTable1'>";
moveTemp+="<tr>";
moveTemp+="<td class='DragGrid_title'>{$title$}</td>";
moveTemp+="</tr>";
moveTemp+="<tr>";
moveTemp+="<td class='DragGrid_content'>&nbsp;</td>";
moveTemp+="</tr>";
moveTemp+="</table>";
moveTemp+="</div>";

//moveTemp+="<div id='li_{$rssid$}_h' onClick='setUnuseId(this.parentNode)'>"
//moveTemp+="<table border='0' width='95%' cellpadding='0' cellspacing='0' class='dragTable1'>";
//moveTemp+="<tr>";
//moveTemp+="<td class='drogmenu_header_left'></td>";
//moveTemp+="<td class='drogmenu_header'>{$title$}</td>";
//moveTemp+="<td class='drogmenu_header_right'></td>";
//moveTemp+="</tr>";
//moveTemp+="<tr>";
//moveTemp+="<td colspan='3' class='drogmenu_td_per'>&nbsp;</td>";
//moveTemp+="</tr>";
//moveTemp+="<tr>";
//moveTemp+="<td class='drogmenu_bottom_left'></td>";
//moveTemp+="<td class='drogmenu_bottom_mid'></td>";
//moveTemp+="<td class='drogmenu_bottom_right'></td>";
//moveTemp+="</tr>";
//moveTemp+="</table>";
//moveTemp+="</div>";

//容器
	var ctlArray=[];
<c:forEach var="target" items="${targetItems}">
	ctlArray[ctlArray.length]=["${target.name}","${target.type}"];
</c:forEach>

//定义各版块参数(id,title,parentId):
	var rssArray=[];
<c:forEach var="temp" items="${tempItems}">
	rssArray[rssArray.length]=["${temp.dragSourceTempId}","${temp.title}","${temp.secDragTargetDO.name}","${ctx}/images/${temp.icon}","0","${temp.secDragTargetDO.type}"];
</c:forEach>

<c:forEach var="dragSource" items="${sourceItems}">
	rssArray[rssArray.length]=["${dragSource.secDragSourceTempDO.dragSourceTempId}","${dragSource.secDragSourceTempDO.title}","${dragSource.secDragTargetDO.name}","${ctx}/images/${dragSource.secDragSourceTempDO.icon}","1","${dragSource.secDragTargetDO.type}"];
</c:forEach>

function init(){

//定义版块模板
//var rssTemplate="<div class='{$dragStyle$}' id='li_{$rssid$}' >";
//rssTemplate+="<div id='li_{$rssid$}_h' onClick='setUnuseId(this.parentNode)'>"
//rssTemplate+="<table border='0' width='95%' cellpadding='0' cellspacing='0' class='dragTable1'>";
//rssTemplate+="<tr>";
//rssTemplate+="<td class='drogmenu_header_left'></td>";
//rssTemplate+="<td class='drogmenu_header'>{$title$}</td>";
//rssTemplate+="<td class='drogmenu_header_right'></td>";
//rssTemplate+="</tr>";
//rssTemplate+="<tr>";
//rssTemplate+="<td colspan='3' class='drogmenu_td_per'>&nbsp;</td>";
//rssTemplate+="</tr>";
//rssTemplate+="<tr>";
//rssTemplate+="<td class='drogmenu_bottom_left'></td>";
//rssTemplate+="<td class='drogmenu_bottom_mid'></td>";
//rssTemplate+="<td class='drogmenu_bottom_right'></td>";
//rssTemplate+="</tr>";
//rssTemplate+="</table>";
//rssTemplate+="</div></div>";
var rssTemplate="<div class='{$dragStyle$}' id='li_{$rssid$}' >";
rssTemplate+="<div id='li_{$rssid$}_h' onClick='setUnuseId(this.parentNode)'>";
rssTemplate+="<table width='100%' border='0' cellspacing='0' cellpadding='0' class='dragTable1'>";
rssTemplate+="<tr>";
rssTemplate+="<td class='DragGrid_title'>{$title$}</td>";
rssTemplate+="</tr>";
rssTemplate+="<tr>";
rssTemplate+="<td class='DragGrid_content'>&nbsp;</td>";
rssTemplate+="</tr>";
rssTemplate+="</table>";
rssTemplate+="</div></div>";

//分为三个区
var rss_body0 = "";
var rss_body1 = "";
var rss_body2 = "";


var rssTemp=""
var start=0;

for(var i=0;i<rssArray.length;i++){
	if(rssArray[i][4] != "0"){
		rssTemp=rssTemplate;
		rssTemp=rssTemplate;
		if(rssArray[i][2] != "rss_body2"){
			rssTemp=rssTemp.replace(/{\\$dragStyle\\$}/g,"divdrag_body");
		}else{
			rssTemp=rssTemp.replace(/{\\$dragStyle\\$}/g,"divdrag_bigBody divdrag_body");
		}


		rssTemp=rssTemp.replace(/{\\$webid\\$}/g,"webid");
		rssTemp=rssTemp.replace(/{\\$clink\\$}/g,"clink");
		rssTemp=rssTemp.replace(/{\\$webindex\\$}/g,i);
		rssTemp=rssTemp.replace(/{\\$title\\$}/g,rssArray[i][1]);
		rssTemp=rssTemp.replace(/{\\$rssid\\$}/g,rssArray[i][0]);


			switch(rssArray[i][2]){
				<c:forEach var="target" items="${targetItems}">
					case "${target.name}":
						${target.name} += rssTemp;
						break;
				</c:forEach>
			}
		}

}

$("main_body").innerHTML="";
$("mb").innerHTML="";

for(var j=0;j<ctlArray.length;j++){
	var div=document.createElement("div");
	div.id=ctlArray[j][0];
	if(ctlArray[j][1] == "nomalCtl"){
		div.className="rss_body0";
	}else{
		div.className="rss_bigBody rss_body0";
	}


	div.style.minHeight="1px";
	switch(ctlArray[j][0]){
	<c:forEach var="target" items="${targetItems}">
		case "${target.name}":
			div.innerHTML=${target.name};
			break;
	</c:forEach>

	}
	if(ctlArray[j][1] == "nomalCtl"){
		$("main_body").appendChild(div);
	}else{
		$("mb").appendChild(div);
	}
}

for(var j=0;j<ctlArray.length;j++){
	var divHidden=document.createElement("div");
	divHidden.id="no_drag_"+i;
	divHidden.className="divdrag_body no_drag";



	var divHiddenHeader=document.createElement("div");
	divHiddenHeader.id="no_drag_"+i+"_header";
	divHiddenHeader.className="";
	divHidden.appendChild(divHiddenHeader)
	$(ctlArray[j][0]).appendChild(divHidden);
}

//初始化未用栏
	for(var i = 0; i<rssArray.length;i++){
		if(rssArray[i][4] == "0"){
			addRow(rssArray[i][0],rssArray[i][1],rssArray[i][3]);
		}
	}

var el=document.getElementById("main_body");_initDragObj(el,"divdrag_body","_h");
var el2=document.getElementById("mb");_initDragObj(el2,"divdrag_body","_h");



}

window.onload=function(){init();}


//增加拖动源
function addRow(rowId, title, imgsrc){
	var aTr = sourceTemp.insertRow();
	aTr.id = rowId;
	var r = document.getElementById(rowId);
	var aTd = aTr.insertCell();
	aTd.className = "personal_out_list";
	aTd.innerHTML = "<span onClick='selectSourceTemp(document.getElementById(" + rowId + "))'><img src='"+ imgsrc +"' align='absmiddle'/>&nbsp;&nbsp;"+ title +"</span>";
}

var selectSTId = "" ; //被选中拖动源id
var selectUnuse = "" ; //需要取消应用的拖动id

//选中后设置改变样式，同时记录选种id到selectSTId
function selectSourceTemp(obj){
	selectSTId = obj.id + "";
	clickListTr_p(obj);
}

//应用
function apply2use(){
		if(selectSTId != ""){
			for(var i = 0; i < rssArray.length ; i++){
				if(rssArray[i][0] == selectSTId ){


					var cdiv=document.createElement("div");
					cdiv.className = "divdrag_body";
					cdiv.id = "li_" + rssArray[i][0];
					var tp = moveTemp;
					tp=tp.replace(/{\\$webid\\$}/g,"webid");
					tp=tp.replace(/{\\$clink\\$}/g,"clink");
					tp=tp.replace(/{\\$webindex\\$}/g,99);
					tp=tp.replace(/{\\$title\\$}/g,rssArray[i][1]);
					tp=tp.replace(/{\\$rssid\\$}/g,rssArray[i][0]);

					cdiv.innerHTML = tp;

					//如果是大容器
					if(rssArray[i][5] == "bigCtl"){
						$("rss_body2").appendChild(cdiv);
					}else{
						if($("rss_body0").childNodes.length > $("rss_body1").childNodes.length){
							$("rss_body1").appendChild(cdiv);
						}else{
							$("rss_body0").appendChild(cdiv);
						}
					}
					$(selectSTId).removeNode(true);//应用后移除

					var el=document.getElementById("main_body");_initDragObj(el,"divdrag_body","_h");
					var el2=document.getElementById("mb");_initDragObj(el2,"divdrag_body","_h");
				}
			}

		}else{
			alert("请选择需要应用的信息栏");
		}

		//当前被拖动节点
				var currentNode = document.getElementById("li_" + selectSTId);
				//当前容器节点
				var parentNode = currentNode.parentNode;
				//找到当前节点位置并记录
				for(i = 0; i < parentNode.childNodes.length; i++ ){
					var node = parentNode.childNodes(i);
					if(node.id == currentNode.id){
						var trueId = node.id;
						trueId = trueId.substr(3,100);
						//alert("parentNode:" + parentNode.id);
						var url = "${ctx}/dndAction.do?method=addDragSource&targetName="+ parentNode.id +"&orderNum=" + (i-1) + "&tempId=" + trueId + "&time" + new Date().getTime();
						updateDragSource(url);
					}
				}

		selectSTId = "";
}

//取消应用
function applayUnuse(){
	if(selectUnuse != ""){
		$(selectUnuse).removeNode(true);

		trueId = selectUnuse.substr(3,100);
		var url = "${ctx}/dndAction.do?method=deleteDrogSource&tempId="+ trueId + "&time" + new Date().getTime();
		updateDragSource(url);

		for(var i=0;i<rssArray.length;i++){
			if("li_" + rssArray[i][0] == selectUnuse){
				addRow(rssArray[i][0],rssArray[i][1],rssArray[i][3]);
				rssArray[i][4] = "0";
			}
		}

		selectUnuse = "";
	}else{
		alert("请选择需要删除的信息栏");
	}
}

//设置取消应用id
function setUnuseId(obj){
	selectUnuse = obj.id + "";
}


</script>
</head>

<body>
  <div class="pageNav_bg">
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td id="pageNav_leftimg"><img src="./images/ico_custom.gif"/></td>
        <td id="navWord"><span class="page_title">个性化设置</span></td>
        <td class="pageNav_right"><a href="javascript:showFull_in();"><img id="full_image" src="./images/ico_fullscreen.gif" alt="全屏/还原" border="0"/></a></td>
      </tr>
    </table>
  </div>
  <table width="100%" border="0" cellpadding="0" cellspacing="0">
    <tr>
      <td valign="top" class="middle_container"><table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td valign="top"><table width="100%" border="0" cellspacing="10" cellpadding="0">
              <tr>
                <td width="23%" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0" >
                    <tr>
                      <td class="outskirt_title">可用信息栏</td>
                    </tr>
                    <tr>
                      <td align="center" class="outskirt_content">

					  <table width="100%" border="0" cellspacing="0" cellpadding="0" class="inside_content">

						  <tr>
                            <td valign="top">
							<table width="100%" border="0" cellpadding="0" cellspacing="4" id="sourceTemp">
                            </table>


							</td>
                          </tr>
                        </table>
                          <br /></td>
                    </tr>
                </table></td>
                <td width="6%" align="center" valign="middle"><table border="0" align="center" cellpadding="5" cellspacing="0">
                    <tr>
                      <td><table border="0" cellpadding="0" cellspacing="0" align="center">
                        <tr>
                          <td class="buttonOffLeft" id="btn1_11"></td>
                          <td class="buttonOffMiddle" id="btn1_12" onblur="btn_change(1)" onMouseOver="btn_change_over(1)" onMouseOut="btn_change_out(1)" onClick="javascript:apply2use()"><img src="./images/ico_desktopzj.gif" border="0" align="absmiddle"></td>
                          <td class="buttonOffRight" id="btn1_13"></td>
                        </tr>
                      </table></td>
                    </tr>
                    <tr>
                      <td><table border="0" cellpadding="0" cellspacing="0">
                        <tr>
                          <td class="buttonOffLeft" id="btn1_21"></td>
                          <td class="buttonOffMiddle" id="btn1_22" onblur="btn_change(2)" onMouseOver="btn_change_over(2)" onMouseOut="btn_change_out(2)" onClick="javascript:applayUnuse()"><img src="./images/ico_desktopyq.gif" border="0" align="absmiddle"></td>
                          <td class="buttonOffRight" id="btn1_23"></td>
                        </tr>
                      </table></td>
                    </tr>
                  </table></td>
                <td width="71%" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0" >
                  <tr>
                    <td class="outskirt_title">当前配置的信息栏布局</td>
                  </tr>
                  <tr>
                    <td class="outskirt_content" style="text-align:center;"><table width="100%" border="0" cellspacing="0" cellpadding="0" class="inside_content">
                        <tr>
                          <td valign="top"><table border="0" cellpadding="0" cellspacing="0" width="100%" >
                              <tr >
                                <td valgin="top" class="layout_left">
<div id="divMainBody">
<div id="main_body" class="main_body">
</div>
<div id="mb" class="main_body">
</div>
</div>

								</td>
                                </tr>

                          </table></td>
                        </tr>
                      </table>
                        <br /></td>
                  </tr>
                </table></td>
              </tr>
          </table></td>
        </tr>
        <tr>
          <td>&nbsp;</td>
        </tr>
      </table></td>
    </tr>
</table>
</body>
</html>
